<%@ page language="java" pageEncoding="UTF-8" %>
<!doctype html>
<html lang="zh-CN">
<head>
    <title>银成教育</title>
    <%@include file="/WEB-INF/views/commons/common.jsp" %>
    <link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/login/css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/login/css/default.css">
    <link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/login/css/styles.css">
</head>
<body>
<div class="login-wrap">
    <div class="login-html">
        <input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">登录账号</label>
        <input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">注册账号</label>
        <div class="login-form">
            <form method="post" action="login">
                <div class="sign-in-htm">
                    <div class="group">
                        <label for="user" class="label">手机号/用户名</label>
                        <input name="userAccount" type="text" class="input" maxlength="11">
                    </div>
                    <div class="group">
                        <label for="pass" class="label">密码</label>
                        <input name="psd" type="password" class="input" data-type="password">
                    </div>
                    <div class="group">
                        <input id="check" type="checkbox" class="check" checked>
                        <label for="check"><span class="icon"></span> 记住我</label>
                    </div>
                    <div class="group">
                        <input id="SignIn" type="button" class="button" value="登录">
                        <input id="SignUpReal" type="submit" style="display: none;" value="注册">
                    </div>
                    <div class="hr"></div>
                    <div class="foot-lnk">
                        <a href="resetpsd.jsp">忘记密码?</a>
                    </div>
                </div>
            </form>
            <form method="post" action="login">
                <div class="sign-up-htm">
                    <div class="group">
                        <label for="user" class="label">姓名</label>
                        <input id="userName" name="userName" type="text" class="input" maxlength="11">
                    </div>
                    <div class="group">
                        <label for="user" class="label">手机号</label>
                        <input id="telephone" name="userAccount" type="text" class="input" maxlength="11">
                    </div>
                    <div class="group" style="overflow:auto;">
                        <label for="user" class="label">验证码</label>
                        <input name="code" type="text" class="input" style=" float:left; width:50%;" maxlength="6">
                        <input type="button" class="getting" value="获取验证码">

                    </div>
                    <div class="group">
                        <label for="pass" class="label">密码</label>
                        <input name="psd" type="password" class="input" data-type="password">
                    </div>
                    <div class="group">
                        <label for="pass" class="label">确认密码</label>
                        <input name="passwordRe" type="password" class="input" data-type="password">
                    </div>
                    <div class="group">
                        <input id="SignUp" type="button" class="button" value="注册">
                    </div>
                    <div class="foot-lnk">
                        <label for="tab-1">回想起密码?</label>
                    </div>
                    <div class="hr"></div>

                </div>
            </form>

        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="${base_href}/static/ui-frame/jquery/1.11.3/jquery.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/jquery-cookie/jquery.cookie.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/layer/layer.js"></script>

<script>
    $(function () {

        function getCode(telePhone) {
            var url = basePath + "/getCode.json?telePhone=" + telePhone + "&type=1";
            $.ajax({
                url: url,
                type: "get",
                dataType: "json",
                success: function (r) {
                    if (r == null) {
                        layer.msg('获取手机验证码失败，请稍后再试');
                    }
                    if (r.code != "OK") {
                        layer.msg('获取手机验证码失败，请稍后再试');
                    }
                }

            })
        }

        /*仿刷新：检测是否存在cookie*/
        if ($.cookie("captcha")) {
            var count = $.cookie("captcha");
            var btn = $('.getting');
            btn.val(count + '秒后可重新获取').attr('disabled', true).css('cursor', 'not-allowed');
            var resend = setInterval(function () {
                count--;
                if (count > 0) {
                    btn.val(count + '秒后可重新获取').attr('disabled', true).css('cursor', 'not-allowed');
                    btn.css('background', '#a5a6a8');
                    $.cookie("captcha", count, {path: '/', expires: (1 / 86400) * count});
                } else {
                    clearInterval(resend);
                    btn.val("获取验证码").removeClass('disabled').removeAttr('disabled style');
                }
            }, 1000);
        }

        /*点击改变按钮状态*/
        $('.getting').click(function () {

            var reg = /^[1]\d{10}$/
            var telePhone = $("#telephone").val();
            if (!reg.test(telePhone)) {
                layer.msg('请输入正确的手机号');
            } else {
                getCode(telePhone);
                var btn = $(this);
                var count = 60;
                var resend = setInterval(function () {
                    count--;
                    if (count > 0) {
                        btn.val(count + "秒后可重新获取");
                        btn.css('background', '#a5a6a8');
                        $.cookie("captcha", count, {path: '/', expires: (1 / 86400) * count});
                    } else {
                        clearInterval(resend);
                        btn.val("获取验证码").removeAttr('disabled style');
                    }
                }, 1000);
                btn.attr('disabled', true).css('cursor', 'not-allowed');
            }

        });

        $("#SignIn").click(function () {
            var checkUrl = basePath + "/checkLogin.json";
            var userAccount = $(".sign-in-htm input[name='userAccount']").val();
            var psd = $(".sign-in-htm input[name='psd']").val();
            $.ajax({
                url: checkUrl,
                type: "post",
                data: {"userAccount": userAccount, "psd": psd},
                dataType: "json",
                success: function (r) {
                    if (r == null) {
                        layer.msg('登录失败，请稍后再试');
                    }
                    if (r.code != "OK") {
                        layer.msg(r.message);
                    }
                    if (r.code == "OK") {
                        $("#SignUpReal").click();
                    }
                },
                fail: function () {
                    layer.msg('服务器异常，请稍后再试或联系管理员');
                }
            });

        })
        $("#SignUp").click(function () {
            var userName = $(".sign-up-htm input[name='userName']").val();
            if (userName == '' || userName == null) {
                layer.msg('请填写姓名');
                return false;
            }
            var userAccount = $(".sign-up-htm input[name='userAccount']").val();
            var psd = $(".sign-up-htm input[name='psd']").val();
            var psdRe = $("input[name='passwordRe']").val();
            if (psdRe != psd) {
                layer.msg('请确认密码是否相同');
                return false;
            }
            var code = $("input[name='code']").val();
            if (code == '' || code == null) {
                layer.msg('请填写验证码');
                return false;
            }
            var url = basePath + "/register.json";
            $.ajax({
                url: url,
                type: "post",
                data: {"userName": userName, "userAccount": userAccount, "psd": psd, "code": code},
                dataType: "json",
                success: function (r) {
                    if (r == null) {
                        layer.msg('注册用户失败，请稍后再试');
                    }
                    if (r.code != "OK") {
                        layer.msg(r.message);
                    }
                    if (r.code == "OK") {
                        layer.msg('注册成功！');
                        $(".sign-up-htm input[type!='button']").each(function () {
                            $(this).val("");
                        });
                        $(".sign-in").click();
                    }
                }

            })
        })


    });
</script>
</html>